<template>
  <div ref="myDiv" style="width:600px;height:400px" />
</template>

<script>
import * as Echarts from 'echarts'
import radarInit from './radar-init'
// vue-echarts
export default {
  name: 'Radar',
  data() {
    return {
      echarts: null
    }
  },
  mounted() {
    this.echarts = Echarts.init(this.$refs.myDiv)
    // Echarts.init(dom节点)  初始化一个echarts实例对象
    // Echarts.setOption({配置对象})  绘制内容
    this.echarts.setOption(radarInit) // 绘制一次，绘制的基础框架！
    this.loadRadarData() // 请求echarts的具体数据
  },
  methods: {
    loadRadarData() {
      setTimeout(() => {
        const data1 = [4200, 3000, 20000, 35000, 50000, 18000]
        const data2 = [5000, 14000, 28000, 26000, 42000, 21000]
        // 处理数据
        radarInit.series[0].data[0].value = data1
        radarInit.series[0].data[1].value = data2
        // 绘制
        this.echarts.setOption(radarInit)
      }, 3000)
    }
  }
}
</script>

<style>

</style>
